<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{width:100px;height:100px;background: red;position: absolute;left:0;top:0;}
  </style>
</head>
<body>
  <div class="box"></div>
</body>
<script>

  // setInterval(()=>{}, 1000/60)
  // 1秒执行60次
  // requestAnimationFrame();
  // 60hz
  // 1000/60

  // function fn(){
  //   console.log(1);
  //   requestAnimationFrame( fn )
  // }
  // requestAnimationFrame( fn );


  const box = document.querySelector(".box");

  let i=0;

  // 基本规则：1s钟屏幕会刷新60次

  let t;

  function fn(){
    // 记录屏幕的刷新次数
    i++;

    if(i%60 === 0){
      box.style.left = box.offsetLeft + 10 + "px";
    }

    t = requestAnimationFrame( fn );
  }
  
  fn();

  document.onclick = function(){
    cancelAnimationFrame(t);
  }

  



  
</script>
</html>